<template>
    <div  class="sub-container">
        <ul>
            <li>
                <span>北京</span>
                <span class="icon-arrow-bottom"></span>
            </li>
            <li>
                <tabs v-model="active"  class="sub-tab-container">
                    <tab v-for="{title,to} in tabs" :key="title" :title="title" :to="to" ></tab>
                </tabs>
            </li>
            <li>
                <icon name="search" size="0.2rem" font-weight="900" />
            </li>


        </ul>
    </div>
</template>

<script>
    import { icon, Tab, Tabs } from 'vant';
    export default {
        name: "HomeSubTab",
        components:{
            Tab,
            Tabs,
            icon
        },
        data() {
           const tabs=[
               {title:"正在热映",to:"/home/movie/hot"},
               {title:"即将上映",to:"/home/movie/comingSoon"}
               ]
            return {
               tabs,
                active: tabs.findIndex(({to})=>{
                    return this.$route.path.includes(to)
                })
            };
        }
    }
</script>

<style lang="scss" scoped>
.sub-container{
    height: 0.6rem;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    ul{
        width: 100%;
        display: flex;
        height: 100%;
        li{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .span{
                color: #666666;
            }
            .icon-arrow-bottom{
                display: block;
                margin-top: 0.1rem;
                width: 0;
                height: 0;
                border: 0.05rem solid #000000;
                border-color: #666666 transparent transparent ;
            }
            .sub-tab-container{
              width: 80%;
                background: #ffffff;
                border: none;
            }
            }
        li:nth-child(1){
            width: 20%;
        }
        li:nth-child(3){
            width: 20%;
            color: #ef4238;
            font-weight:800;
        }
        li:nth-child(2){
            width: 60%;
        }
        }
    }


</style>